<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'shouye.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="css/shouye.css" type="text/css">
    <link rel="stylesheet" href="css/sy-banner.css">
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/shouye.js"></script>
    <script src="js/sy-banner.js"></script>

  </head>
  
  <body>
<!--页头-->
	<input type="hidden" id="tu">
	<input type="hidden" id="ming">
	<input type="hidden" id="zhi">
	<input type="hidden" id="tianjia">
	
    <div>
        <div  id="tou">
            <div id="title">
                <div id="logo"><img src="images/gf_03.gif" height="41" width="44"/></div>
                <div id="caidan">
                    在线商城&emsp;&emsp;<a href="jianguoPro2.jsp">坚果Pro2</a>&emsp;&emsp;坚果Pro&emsp;&emsp;Smartisan OS&emsp;&emsp;欢喜云&emsp;&emsp;应用下载&emsp;&emsp;官方论坛&emsp;&emsp;
                    <div id="tu"><a href="denglupanduan.do"><img src="images/qbsp_06.gif" height="20" width="20"/>${name }</a>&emsp;&emsp;<a href="gouwucheche.do"><img
                            src="images/qbsp_08.gif" height="20" width="25"/></a></div>
                    <div class="yuan" id="yuan8">0</div>
                    <div class="che">
                        <div class="wupin">
                            <ul>
                                <li>
                                    <table width="280" border="0.5" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="52" height="72"><img src="images/gf66.gif"
                                                                            height="75%" width="80%"/></td>
                                            <td width="100"><p>sadf</p></td>
                                            <td width="20">1</td>
                                            <td width="30" class="hong"><span>123456</span></td>
                                        </tr>
                                    </table>
                                </li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="qian">
                            <ul>
                                <li>
                                    <p>当前有<span>1</span>件商品</p>
                                    <h3>合计：<span>￥000</span></h3>
                                </li>
                                <li>
                                    <input type="button" value="去购物车" style="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="cai">
            首页&emsp;&emsp;<span id="shouji"><a href="jianguoPro2.html">手机</a></span>&emsp;&emsp;“足迹系列”手感膜&emsp;&emsp;“足迹系列”保护套&emsp;&emsp;官方配件&emsp;&emsp;空气净化类&emsp;&emsp;周边产品&emsp;&emsp;第三方配件&emsp;&emsp;<a href="quanbu.do">全部商品</a>&emsp;&emsp;服务
        </div>

    </div>
<div class="ban">
    <div class="zhong">
        首页&emsp;&emsp;<span id="shouji2">手机</span>&emsp;&emsp;“足迹系列”手感膜&emsp;&emsp;“足迹系列”保护套&emsp;&emsp;官方配件&emsp;&emsp;空气净化类&emsp;&emsp;周边产品&emsp;&emsp;<a href="quanbu.do">全部商品</a>
        <div class="jia">
            <a href="denglupanduan.do"><img src="images/c_06.gif" height="24" width="24"/>${name }</a>&emsp;&emsp;
            <a href="gouwucheche.do"><img src="images/c_08.gif" height="24" width="30"/></a>
            <div class="yuan" id="yuan9">0</div>
            <input type="hidden" id="yin9" value="${yuan }">
            <input type="hidden" id="ying10" value = "${yuan1 }">
        </div>
    </div>
</div>
<div id="erji1">
    <div class="zhong2">
        <a href="jianguoPro2.html">
            <div>
                <img src="images/jianguo.jpg" height="181" width="111"/>
                <p>坚果 Pro 2</p>
                <p class="hong3">￥1,799,00元起</p>
            </div>
        </a>
    </div>
</div>
<div id="erji2">
    <div class="zhong2">
        <div>
            <img src="images/jianguo.jpg" height="181" width="111"/>
            <p>坚果 Pro 2</p>
            <p class="hong3">￥1,799,00元起</p>
        </div>
    </div>
</div>
<div class="fanding">
    <img src="images/rocket_button_up2.png" height="115" width="72" id="tu2"/>
</div>
<!--主体-->
    <div id="body">
        <!--banner-->
        <div id="test">
            <div id="banner">
                    <div class="bt">
                        <ul>
                        <c:forEach items="${list }" var="list">
                        	<li><img src="${list.img }" width="1221" height="500"/></li>
                        </c:forEach>
                        </ul>
                    </div>
                <div class="ding">
                    <ul>
	                    <c:forEach begin="1" end="${list.size() }" var="i">
	                    	<li class="yang2"></li>
	                    </c:forEach>
	                    <input id="yin1" type="hidden" value="${list.size() }">
                    </ul>
                </div>
                <div class="zuo3">&lt;</div>
                <div class="you3">&gt;</div>
            </div>
        </div>
        <!--广告-->
        <div id="guanggao">
            <div>
                <p>畅呼吸智能空气净化器</p>
                <p>· 及畅呼吸新品配件·</p>
                <img src="images/guanfan_17.gif" height="105" width="305"/>
            </div>
            <div>
                <p>Smartisan & 畅呼吸新品配件</p>
                <p>· 功夫出色，一应俱全·</p>
                <img src="images/guanfan_19.gif" height="105" width="305"/>
            </div>
            <div>
                <p>让旧手机告别闲置</p>
                <p>· 仅需4步，轻松完成置换·</p>
                <img src="images/guanfan_21.gif" height="105" width="305"/>
            </div>
            <div>
                <p>Smartisan 秋款卫衣</p>
                <p>· 舒适服帖，暖如拥抱·</p>
                <img src="images/guanfan_23.gif" height="105" width="305"/>
            </div>
        </div>
        <!--热门商品-->
        <div class="remen">
            <div class="tiao">
                &emsp;&emsp;官方配件
            </div>
            <div class="tu">
                <div>
                    <ul>
	                    <c:forEach items="${gfpj}" var="gfpj">
	                    	<li>
	                            <div>
	                                <img src="${gfpj.iid.img }" height="178" width="148"/>
	                                <p>${gfpj.name }</p>
	                                <p>${gfpj.introduction }</p>
	                                <p class="hong">￥${gfpj.money }</p>
	                                <div class="yinchang">
	                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
	                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
	                                </div>
	                            </div>
	                        </li>
	                    </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--净化器及配件-->
        <div class="jinghuaqi">
            <div class="tiao">
                &emsp;&emsp;净化器及配件
            </div>
            <div class="er">
                <ul>
                    <li>
                        <div>
                            <img src="images/guanfan_45.gif" height="427" width="610"/>
                        </div>
                    </li>
                    <c:forEach items="${jhqjpj}" var="gfpj">
	                     <li>
	                        <div>
	                            <img src="${gfpj.iid.img }" height="178" width="148"/>
	                            <p>${gfpj.name }</p>
	                            <p>${gfpj.introduction }</p>
	                            <p class="hong">￥${gfpj.money }</p>
	                            <div class="yinchang2">
	                                <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
	                                <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
	                            </div>
	                        </div>
	                    </li>
	               </c:forEach>
                </ul>
            </div>
        </div>
        <!--官方精选-->
        <div class="tong">
            <div class="tiao">
                &emsp;&emsp;官方配件
            </div>
            <div class="nei">
                <div>
                    <ul>
                        <li>
                            <div><img src="images/guanfan_51.gif" height="427" width="610"/></div>
                        </li>
                        <c:forEach items="${gfpj1}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count==4||row.count==3}"> 
			                    <li>
		                            <div>
		                                <img src="${gfpj.iid.img}" height="192" width="204"/>
		                                <p>${gfpj.name }</p>
		                                <p>${gfpj.introduction }</p>
		                                <p class="hong">￥${gfpj.money }</p>
		                                <div class="yinchang2">
		                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
		                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
		                                </div>
		                            </div>
		                        </li>
	                         </c:if>
	               		</c:forEach>
                    </ul>
                </div>
                <div>
                	<ul>
                		<c:forEach items="${gfpj1}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count!=3||row.count!=4}"> 
		                        <li>
		                            <div class="erhang">
		                                <img src="${gfpj.iid.img }" height="192" width="204"/>
		                                <p>${gfpj.name }</p>
		                                <p>${gfpj.introduction }</p>
		                                <p class="hong">￥${gfpj.money }</p>
		                                <div class="yinchang2">
		                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
		                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
		                                </div>
		                            </div>
		                        </li>
	                         </c:if>
	               		</c:forEach>
                	</ul>
                </div>
            </div>
        </div>
        <!--周边商品-->
        <div class="tong">
            <div class="tiao">
                &emsp;&emsp;周边商品
            </div>
            <div class="nei">
                <div>
                    <ul>
                        <li>
                            <div><img src="images/guanfan_74.gif" height="427" width="610"/></div>
                        </li>
                        <c:forEach items="${zbsp}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count<=2}"> 
					                <li>
			                            <div>
			                                <img src="${gfpj.iid.img }" height="192" width="204"/>
			                                <p>${gfpj.name }</p>
			                                <p>${gfpj.introduction }</p>
			                                <p class="hong">￥${gfpj.money }</p>
			                                <div class="yinchang2">
			                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
			                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
			                                </div>
			                            </div>
			                        </li>
	                         </c:if>
	               		</c:forEach>
                    </ul>
                </div>
                <div>
                    <ul>
                        <c:forEach items="${zbsp}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count>2}"> 
				                <li>
		                            <div class="erhang">
		                                <img src="${gfpj.iid.img }" height="192" width="204"/>
		                                <p>${gfpj.name }</p>
		                                <p>${gfpj.introduction }</p>
		                                <p class="hong">￥${gfpj.money }</p>
		                                <div class="yinchang2">
		                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
		                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
		                                </div>
		                            </div>
		                        </li>
	                         </c:if>
	               		</c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--品牌精选-->
        <div class="tong">
            <div class="tiao">
                &emsp;&emsp;品牌精选
            </div>
            <div class="nei">
                <div>
                    <ul>
                        <li>
                            <div><img src="images/guanfan_91.gif" height="427" width="610"/></div>
                        </li>
                        <c:forEach items="${ppjx}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count<=2}"> 
				                 <li>
		                            <div>
		                                <img src="${gfpj.iid.img }" height="192" width="204"/>
		                                <p>${gfpj.name }</p>
		                                <p>${gfpj.introduction }</p>
		                                <p class="hong">￥${gfpj.money }</p>
		                                <div class="yinchang2">
		                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
		                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
		                                </div>
		                            </div>
		                        </li>
	                         </c:if>
	               		</c:forEach>
                    </ul>
                </div>
                <div>
                    <ul>
                        <c:forEach items="${ppjx}" var="gfpj" varStatus="row">
	                         <c:if test="${row.count>2}"> 
				                <li>
		                            <div class="erhang">
		                                <img src="${gfpj.iid.img }" height="192" width="204"/>
		                                <p>${gfpj.name }</p>
		                                <p>${gfpj.introduction }/p>
		                                <p class="hong">￥${gfpj.money }</p>
		                                <div class="yinchang2">
		                                    <input type="button" value="查看详情" style="border: 0px solid #000; border-radius: 5px;color: #000;">
		                                    <input type="button" value="立即购买" style="border: 0px solid #000; border-radius: 5px;background-color: #537be0;color: #fff">
		                                </div>
		                            </div>
		                        </li>
	                         </c:if>
	               		</c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <!--锤子科技动态-->
        <div class="dong">
            <div class="tiao">
                &emsp;&emsp;锤子科技动态
            </div>
            <div class="nei1">
                <div><img src="images/guanfan_108.gif" height="199" width="305"/></div>
                <div><img src="images/guanfan_110.gif" height="199" width="304"/></div>
                <div><img src="images/guanfan_111.gif" height="199" width="304"/></div>
                <div><img src="images/guanfan_112.gif" height="199" width="305"/></div>
            </div>
        </div>
        <!--锤子应用-->
        <div class="chuizi">
            <div class="tiao">
                &emsp;&emsp;锤子应用
            </div>
            <div class="nei1">
                <div>
                    <div class="tupian"><img src="images/guanfan_116.gif" height="125" width="113"/></div>
                    <p>HandShaker</p>
                    <div class="wenzi"><p>在Mac和Windows 电脑上也可以方便自如地<br>管理你在 Android 手机中的内容</p></div>
                    <div><img src="images/guanfan_130.gif" height="21" width="53"/></div>
                </div>
                <div>
                    <div class="tupian"><img src="images/guanfan_119.gif" height="125" width="113"/></div>
                    <p>锤子便签</p>
                    <div class="wenzi"><p>雅致的信纸、精心调整的文字排版<br>这可能是最让人想写字的便签应用</p></div>
                    <div><img src="images/guanfan_133.gif" height="21" width="50"/></div>
                </div>
                <div>
                    <div class="tupian"><img src="images/guanfan_121.gif" height="125" width="113"/></div>
                    <p>锤子桌面</p>
                    <div class="wenzi"><p>他 示范了何为“美观、易用和人性化”</p></div>
                    <div><img src="images/guanfan_136.gif" height="21" width="21"/></div>
                </div>
                <div>
                    <div class="tupian"><img src="images/guanfan_123.gif" height="125" width="113"/></div>
                    <p>锤子科技论坛</p>
                    <div class="wenzi"><p>是一个科技论坛<br>不只是科技论坛</p></div>
                    <div><img src="images/guanfan_136.gif" height="21" width="21"/></div>
                </div>
            </div>
        </div>
    </div>
<!--页脚-->
<div class="j">
        <div id="yejiao">
        <div class="kuan">
            <div class="zuo">
                <ul id="hhhh">
                    <li >
                        <p>订单服务</p>
                        <p>购买指南<br>支付方式<br>送货政策</p>
                    </li>
                    <li>
                        <p>服务支持</p>
                        <p>售后服务<br>维修门店<br>零售门店</p>
                    </li>
                    <li>
                        <p>自助服务</p>
                        <p>热点资讯<br>预约购买<br>订单物流</p>
                    </li>
                    <li>
                        <p>媒体中心</p>
                        <p>新闻动态<br>官方视频<br>图片资源</p>
                    </li>
                    <li>
                        <p>关于公司</p>
                        <p>公司简介<br>加入我们<br>联系我们</p>
                    </li>
                    <li>
                        <p>关注我们</p>
                        <p>新浪微博<br>官方微信<br>官方贴吧</p>
                    </li>
                </ul>
            </div>
            <div class="you">
                <h3>400-626-5666</h3>
                <p class="p">周一至周六9：00-1800(仅收市话费)</p>
                <div id="xiao"><img src="images/gfzx_156.gif" height="14" width="15"/> 在线帮助</div>
            </div>
        </div>
        <hr>
        <div class="z">
            <p>Copyright © , Smartisan Digital Co., Ltd. All Rights Reserved.北京锤子数码科技有限公司 &emsp;|<span>法律声明</span> &emsp;|<span>隐私条款</span> &emsp;|<span>开发者中心</span><br>
                <span style="color: #5c5251">京ICP备14041720号-1京ICP证140622号京公网安备11010502025474</span>
            </p>
        </div>
        <div class="you2">
            <img src="images/gfzx_160.gif" height="15" width="23"/>&emsp;中文
        </div>
    </div>
</div>

</body>
</html>
